<template>
    <div>
        <el-dialog
            v-model="visible"
            title="修改学生"
            width="30%"
            :before-close="handleClose"
            @open="handleOpen"
        >
            <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                status-icon
                :rules="rules"
                label-width="60px"
            >
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="student.name" />
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="student.age" />
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-radio-group v-model="student.gender">
                        <el-radio label="男">男</el-radio>
                        <el-radio label="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="选择班级">
                    <el-select
                        v-model="student.classId"
                        placeholder="请选择班级"
                        size="large"
                    >
                        <el-option
                            v-for="item in classes"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="visible = false">取消</el-button>
                    <el-button type="primary" @click="handleUpdate">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref,defineEmits,defineProps } from "vue";
import {update} from "../../service/student";
import { listAllClass } from "../../service/class";
import { useStudentStore } from "../../stores/student";
import { storeToRefs } from "pinia";
const studentStore = useStudentStore();
const {visible,student} = storeToRefs(studentStore);
const emits = defineEmits(["show","setVisible"]);
const props = defineProps(["visible","student"]);
// const dialogVisible = ref(false);
const classes = ref([]);

async function handleOpen(){
    let res = await listAllClass();
    classes.value = res.data;
    student.value.classId = student.value.classz.id;
}
async function handleUpdate(){

    visible.value = false;
    await update(student.value);
    emits("show");

}
</script>
<style></style>
